<template>
<div>
    <el-card class="list-card">
        <ul>
            <li v-for="item in list" :key="item.path">
                <a :href="item.path" target="_blank">{{ item.title }}</a>
            </li>
        </ul>
        <el-button @click="prePage">上一页</el-button>
        <el-button @click="nextPage">下一页</el-button>
    </el-card>
</div>
</template>

<script>
// 父组件调用示例 <NewsList :list="newsList" :currentPage="currentPage" @page="getNewsList" />
export default {
    //定义组件的属性，父组件调用中可以绑定这些属性
    props: ["list", "currentPage"],
    methods: {
        prePage() {
            //触发page事件，父组件调用中可绑定该事件
            this.$emit('page', {
                page: this.currentPage - 1,
                count: 10
            });
        },
        nextPage() {
            this.$emit('page', {
                page: this.currentPage + 1,
                count: 10
            });
        }
    }
};
</script>

<style scoped>
.list-card {
    width: 500px;
}
</style>
